import { EventJoin, EventListProps } from '@/api';
import { Button, Popup } from '@antmjs/vantui';
import { Image, Text, View } from '@tarojs/components';
import dayjs from 'dayjs';
import { useState } from 'react';
import { useRequest } from 'taro-hooks';

export default function useConfirm(props: {
  detail: EventListProps;
  onSuccess: Function;
}) {
  const [show, setShow] = useState<boolean>(false);

  //参与
  const { runAsync: runJoin, loading } = useRequest(EventJoin, {
    manual: true,
  });

  function renderNode() {
    return (
      <Popup
        show={show}
        style={{
          backgroundColor: 'transparent',
        }}
      >
        <View
          className='w-[630px] rounded-xl px-5'
          style={{
            background: 'linear-gradient(180deg, #D3EDFF 0%, #FFFFFF 100%);',
          }}
        >
          <Text className=' py-5 text-[36px] font-bold text-black text-center block'>
            报名确认
          </Text>
          <View className=' text-center text-sm text-gary1 mb-2'>
            消耗
            <Text className=' text-primary'>{props.detail?.beans}帮豆</Text>
            报名
            <Text className=' text-primary font-bold'>
              「{props.detail?.title}」
            </Text>{' '}
            ？
          </View>

          <View
            className='p-3 flex border-2 border-gary2 rounded-lg items-center text-black'
            style={{
              background:
                ' linear-gradient(180deg, #EBF2FE 0%, #F3F7FC 98%), linear-gradient(229deg, #EBF2FE 0%, #FBFBFB 100%);',
            }}
          >
            <Image
              src='https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/icon-confirm.png'
              className='w-[112px] h-[100px] bg-cover mr-2 block'
              mode='aspectFill'
            />
            <View className=' flex-1 text-sm'>
              {props.detail?.event_start && (
                <Text className=' block'>
                  活动时间：
                  {dayjs(props.detail.event_start).format('YYYY-MM-DD HH:mm')}
                </Text>
              )}

              <Text className=' block'>活动地点：{props.detail?.location}</Text>
            </View>
          </View>

          {/* buttons */}
          <View
            className=' flex space-x-2 py-4'
            style={{
              //@ts-ignore
              '--button-default-background-color': '#F6F8FA',
            }}
          >
            <Button block onClick={() => setShow(false)}>
              取消
            </Button>
            <Button
              type='primary'
              block
              loading={loading}
              onClick={async () => {
                await runJoin({ event_id: props.detail.id! });
                setShow(false);
                props.onSuccess && props.onSuccess();
              }}
            >
              确定
            </Button>
          </View>
        </View>
      </Popup>
    );
  }
  return {
    renderNode,
    open: function () {
      setShow(true);
    },
  };
}
